<!-- 
 * @author: 十一
 * @since: 2024-03-27
 * login.vue
 * @desc: 登录页 -->

<script lang="ts" setup>
import { reactive, toRaw, ref, onMounted } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { Form } from 'ant-design-vue'
import { useCodeCountdownStore } from '@/stores/codeCountdownStore'
import { useUserInfoStore } from '@/stores/userinfoStrore'
import { useRouter } from 'vue-router'
import { sendVerificationCode, login, getDictionaryList, getUserInfo } from '@/servers/main'
import { message } from 'ant-design-vue'
import { useDictionaryStore } from '@/stores/useDictionaryStore'
const Router = useRouter()
const useForm = Form.useForm
interface FormState {
  phone_number: string
  password: string
}
const formState = reactive<FormState>({
  phone_number: '',
  password: ''
})

const rulesRef = reactive({
  phone_number: [
    {
      required: true,
      message: '账号不能为空'
    }
  ],
  password: [
    {
      required: true,
      message: '密码不能为空！'
    },
    {
      min: 6,
      message: '密码长度不能小于6位',
      trigger: 'blur'
    }
  ]
})
const { setDictionary } = useDictionaryStore()
onMounted(async () => {
  await getDictionaryList({pageSize:1000,current:1}).then((response: any) => {
    setDictionary(response.result.list)
  })
})
const { validate, validateInfos } = useForm(formState, rulesRef)
const useCodeCountdown = useCodeCountdownStore()

let SendCodeDisabled = ref(false)
let codeText = ref('发送验证码')

let codeCountdown = ref(5)
const handleSendCode = () => {
  sendVerificationCode({ phone_number: Number(formState.phone) }).then((response: any) => {
    if (response.status === 200) {
      message.success(response.message)
      SendCodeDisabled.value = true
      let timer = setInterval(() => {
        if (useCodeCountdown.gettersCodeCountdown == 0) {
          clearInterval(timer)
          codeText.value = '获取验证码'
          codeCountdown.value = 5
          // useCodeCountdown.setCodeCountdown(5)
          useCodeCountdown.$patch((state) => {
            state.codeCountdown = 5
          })
          SendCodeDisabled.value = false
        } else {
          codeText.value = `${useCodeCountdown.gettersCodeCountdown}后重新发送`
          codeCountdown.value--
          // useCodeCountdown.setCodeCountdown(codeCountdown.value)
          useCodeCountdown.$patch((state) => {
            state.codeCountdown = codeCountdown.value
          })
          SendCodeDisabled.value = true
        }
      }, 1000)
    } else {
      message.error(response.message)
    }
  })
}
// 提交表单
const { setLoginStatue, setUserInfo, setToken } = useUserInfoStore()
const onSubmit = () => {
  validate()
    .then(() => {
      login(formState).then((response: any) => {
        console.log(response.request)
        if (response.code == 200) {
          message.success(response.message)
          setToken(response.result.token)
          getUserInfo().then((res: any) => {
            console.log(res)
            setLoginStatue({ state: true })
            setUserInfo(res.result)
            Router.push('/')
          })
          
        } else {
          message.error(response.message)
        }
      })
    })
    .catch((err) => {
      console.log('error', err)
    })
}

const typedText = ref<string>('')
const text =
  ref<string>(`欢迎来到自由极客站点！在这里，您将找到海量的免费好用软件以及自己制作的小工具。我们的目标是为广大用户提供便捷、实用的免费资源，帮助您节省时间，提高工作效率！
作为一名软件工程师，我一直致力于寻找并分享那些能真正帮助到用户的优秀软件。有些软件需要付费购买，但我相信，通过分享，我们可以让更多的人受益。如果您发现了哪些免费好用软件或小工具，欢迎随时向我反馈，我会尽力将其收录在此，让更多的人受益。
在接下来的时间里，我也会不断学习，不断更新，为您带来更多高质量的免费资源。同时，我也希望您能多提建议，帮助我不断优化本站及软件的性能。感谢您的支持！`)
function typeWriter() {
  let index = 0
  const typingInterval = setInterval(() => {
    typedText.value += text.value[index]
    index++
    if (index === text.value.length) {
      clearInterval(typingInterval)
    }
  }, 100) // 这里的100是每个字符出现的间隔时间，可以根据需要调整
}
typeWriter()
</script>
<template>
  <div class="login">
    <a-row>
      <a-col
        :xxl="{ span: 14, offset: 5 }"
        :xl="{ span: 16, offset: 4 }"
        :lg="{ span: 14, offset: 5 }"
        :md="{ span: 14, offset: 5 }"
        :sm="{ span: 14, offset: 5 }"
        :xs="{ span: 18, offset: 3 }"
      >
        <a-row>
          <a-col :xs="0" :sm="0" :md="0" :lg="12" :xl="14" :xxl="14" class="text">{{
            typedText
          }}</a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="10" :xxl="10" style="background: #fff">
            <img src="../../assets/images/logo.svg" alt="" style="width: 100%" />
            <a-form name="basic" autocomplete="off" style="padding: 0 15px">
              <a-form-item v-bind="validateInfos.phone_number">
                <a-input v-model:value="formState.phone_number" placeholder="账号"   size="large">
                  <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
              </a-form-item>
              <a-form-item v-bind="validateInfos.password">
                <a-input type="password" v-model:value="formState.password" placeholder="密码"   size="large">
                  <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
              </a-form-item>
              <!-- <a-form-item v-bind="validateInfos.code">
                <a-input-group compact>
                  <a-input
                    v-model:value="formState.code"
                    type="code"
                    placeholder="验证码"
                    style="width: calc(100% - 131px)"
                  >
                    <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                  </a-input>
                  <a-button type="primary" @click="handleSendCode" :disabled="SendCodeDisabled">{{
                    codeText
                  }}</a-button>
                </a-input-group>
              </a-form-item> -->

              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                  style="width: 100%"
                  size="large"
                  @click.prevent="onSubmit"
                  >登录</a-button
                >
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/images/pic_01.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}
.login > .ant-row {
  width: 100%;
}

.text {
  box-shadow: 0px 0px 5px -3px #ffffff;
  padding: 20px;
  color: #ffffff;
  line-height: 2;
  font-size: 15px;
}
</style>
